﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" href="css/home.css">
    <link rel="stylesheet" type="text/css" href="css/gongkaik.css">
    <link rel="stylesheet" type="text/css" href="css/youxi.css">
    <link rel="stylesheet" href="css/denglu/denglu.css" type="text/css" >
    <script type="text/javascript" src="js/jquery-1.4.2.min.js" ></script>
    <title>公开课</title>
</head>
<body>
<div class="gongkaiktop">
    <div class="header-bar">
        <div class="index-header">
            <!--头部左边-->
            <div class="index-header-left">
                <a href="#">
                    <img src="img/pipa-01.png" />
                </a>
            </div>
            <!--头部中间-->
            <div class="index-header-center">
                <div class="index-header-center-ul">
                    <ul class="index-header-center-ul-li">
                        <li><a href="codemao.html" >首页</a></li>
                        <li><a href="gongkaik.html" class="li-li li-li2">公开课</a></li>
                        <li ><a href="#">赛事活动</a></li>
                        <li><a href="sucaiku.html">素材库</a></li>
                        <li ><a href="#">加盟合作</a></li>
                        <li ><a href="shequ.html">知识社区</a></li>
                    </ul>
                </div>
                <div class="pipa"><a href="#">PiPa一下</a></div>.
            </div>
            <!--头部右边-->
            <div class="index-header-right" id="index-header-R">
                <div class="index-header-right-1">
                    <div class="index-header-right-C-L"><img src="http://7xo6t4.com2.z0.glb.qiniucdn.com/user_0006.png" /></div>
                    <div class="index-header-right-C-S">
                        <!--未登录--><a href="#"><span id="zuce">注册</span></a>&nbsp;<span>/</span>&nbsp;<a href="#"><span id="denglu">登陆</span></a>
                        <!--完成登陆--><!--<span>bonniebonniebonnie</span>-->
                    </div>
                </div>
                <div class="index-header-right-C-W" id="index-header-W">
                    <ul class="index-header-right-ul">
                        <li><a>作品管理</a></li>
                        <li><a>社区信息</a></li>
                        <li><a>我的精灵</a></li>
                        <li><a>个人中心</a></li>
                        <li><a>账号设置</a></li>
                        <li><a>推出登陆</a></li>
                    </ul>
                </div>
                <!--弹出框-->
                <div class="hide-center-1">
                    <div class="hide-center">
                        <div id="formhead">
                            <div class="formhead-img"><img src="img/img36.png" /></div>
                            <div style="text-align: end;"><button type="button" id="close"><img src="img/gb.png" /></button></div>
                            <div class="input-1" id="input-1">
                                <form action="" method="">
                                    <input type="text" placeholder="请输入手机号码" class="input-1-input-1"></br>
                                    <!--<input type="text" placeholder="请输入验证码" style="width: 130px"> <input type="submit" value="获取验证码" style="width: 115px;background-color: #2e7acc;color: #ffffff;box-shadow: inset 0 -3px 0 0 #20558e;"></input></br>-->
                                    <input type="password" placeholder="设置密码"  class="input-1-input-2"></br>
                                    <input type="submit" value="注册" class="input-1-input-3" >
                                    <p style="float: left"><span>注册即同意</span><span style="color: #2074cf">用户协议</span></p><div style="float: right"><span id="return">返回登录</span></div>
                                </form>
                            </div>

                            <div class="input-1" id="input-2" style="display: none">
                                <form action="" method="">
                                    <input type="text" placeholder="请输入账号/手机号码" class="input-1-input-1"></br>
                                    <input type="password" placeholder="请输入密码"  class="input-1-input-2"></br>
                                    <input type="submit" value="登陆" class="input-1-input-3">
                                    <p style="float: left"><span>没有账号?</span><span style="color: #2074cf" id="return3">免费注册</span></p><div style="float: right"><span id="return1" style="color: #2074cf;display: none">账号密码登陆</span></div>
                                </form>
                            </div>
                        </div>

                        <div id="formbody" class="formbody1">
                            <div class="formbody-div">
                                <p>第三方登陆</p>
                                <div class="formbody-div-img">
                                    <div class="formbody-div-img-1">
                                        <img src="img/img22.png">
                                    </div>
                                    <div class="formbody-div-img-1">
                                        <img src="img/img23.png">
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="gongkaik-center">
    <div class="gongkaik-center-q">
    <img src="img/img06.png" />
    </div>
    <div class="gongkaik-center-b">
        <div class="gongkaik-center-b-T">
        <img src="img/img07.png" />
            <span>CodeMonkey公开课</span>
        </div>
        <div class="gongkaik-center-c">
            <div class="gongkaik-center-c-left">
                <img src="img/img08.png" class="img01">
                <img src="img/img12.png" class="img03">
                <div class="gongkaik-center-c-left-bofan">
                    <div class="gongkaik-center-c-left-i">
                        <img src="img/img20.png" />
                    </div>
                    <div class="gongkaik-center-c-left-o">
                        <img src="img/img10.png" />
                        <img src="img/img11.png" class="img01"/>
                    </div>
                </div>
            </div>
            <div class="gongkaik-center-c-right">
                <div class="youxi-center-right-div2">
                    <ul class="ul">
                        <li>
                            <div class="youxi-center-right-span"><span class="youxi-center-right-s">CodeMonkey公开课</span></div>
                        </li>
                        <li>
                            <div class="youxi-center-right-span"><span>其他课程</span></div>
                        </li>
                    </ul>
                </div>
                <div class="gongkaik-center-c-right-neirong">
                    <div class="youxi-center-right-bottom" style="z-index: 1">
                        <div class="youxi-center-right-bottom-1">
                            <ul>
                                <li>
                                    <div class="youxi-center-right-bottom-1-1">
                                        <a href="javascript:void(0)">
                                            <div class="youxi-center-right-bottom-1-1-1">
                                                <div class="youxi-center-right-bottom-1-1-1-img">
                                                    <img src="img/img21.png"/>
                                                </div>
                                                <div class="youxi-center-right-bottom-1-1-1-p">
                                                    <p>时钟射手</p>
                                                    <div class="b-d"><i class="i1"></i><span>19K</span><i class="i2"></i><span>19K</span></div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </li>
                                <li>
                                    <div class="youxi-center-right-bottom-1-1">
                                        <a href="javascript:void(0)">
                                            <div class="youxi-center-right-bottom-1-1-1">
                                                <div class="youxi-center-right-bottom-1-1-1-img">
                                                    <img src="img/img21.png"/>
                                                </div>
                                                <div class="youxi-center-right-bottom-1-1-1-p">
                                                    <p>时钟射手</p>
                                                    <div class="b-d"><i class="i1"></i><span>19K</span><i class="i2"></i><span>19K</span></div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </li>
                                <li>
                                    <div class="youxi-center-right-bottom-1-1">
                                        <a href="javascript:void(0)">
                                            <div class="youxi-center-right-bottom-1-1-1">
                                                <div class="youxi-center-right-bottom-1-1-1-img">
                                                    <img src="img/img21.png"/>
                                                </div>
                                                <div class="youxi-center-right-bottom-1-1-1-p">
                                                    <p>时钟射手</p>
                                                    <div class="b-d"><i class="i1"></i><span>19K</span><i class="i2"></i><span>19K</span></div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </li>
                                <li>
                                    <div class="youxi-center-right-bottom-1-1">
                                        <a href="javascript:void(0)">
                                            <div class="youxi-center-right-bottom-1-1-1">
                                                <div class="youxi-center-right-bottom-1-1-1-img">
                                                    <img src="img/img21.png"/>
                                                </div>
                                                <div class="youxi-center-right-bottom-1-1-1-p">
                                                    <p>时钟射手</p>
                                                    <div class="b-d"><i class="i1"></i><span>19K</span><i class="i2"></i><span>19K</span></div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </li>
                                <li>
                                    <div class="youxi-center-right-bottom-1-1">
                                        <a href="javascript:void(0)">
                                            <div class="youxi-center-right-bottom-1-1-1">
                                                <div class="youxi-center-right-bottom-1-1-1-img">
                                                    <img src="img/img21.png"/>
                                                </div>
                                                <div class="youxi-center-right-bottom-1-1-1-p">
                                                    <p>时钟射手</p>
                                                    <div class="b-d"><i class="i1"></i><span>19K</span><i class="i2"></i><span>19K</span></div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </li>
                                <li>
                                    <div class="youxi-center-right-bottom-1-1">
                                        <a href="javascript:void(0)">
                                            <div class="youxi-center-right-bottom-1-1-1">
                                                <div class="youxi-center-right-bottom-1-1-1-img">
                                                    <img src="img/img21.png"/>
                                                </div>
                                                <div class="youxi-center-right-bottom-1-1-1-p">
                                                    <p>时钟射手</p>
                                                    <div class="b-d"><i class="i1"></i><span>19K</span><i class="i2"></i><span>19K</span></div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </li>
                                <li>
                                    <div class="youxi-center-right-bottom-1-1">
                                        <a href="javascript:void(0)">
                                            <div class="youxi-center-right-bottom-1-1-1">
                                                <div class="youxi-center-right-bottom-1-1-1-img">
                                                    <img src="img/img21.png"/>
                                                </div>
                                                <div class="youxi-center-right-bottom-1-1-1-p">
                                                    <p>时钟射手</p>
                                                    <div class="b-d"><i class="i1"></i><span>19K</span><i class="i2"></i><span>19K</span></div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </li>
                                <li>
                                    <div class="youxi-center-right-bottom-1-1">
                                        <a href="javascript:void(0)">
                                            <div class="youxi-center-right-bottom-1-1-1">
                                                <div class="youxi-center-right-bottom-1-1-1-img">
                                                    <img src="img/img21.png"/>
                                                </div>
                                                <div class="youxi-center-right-bottom-1-1-1-p">
                                                    <p>时钟射手</p>
                                                    <div class="b-d"><i class="i1"></i><span>19K</span><i class="i2"></i><span>19K</span></div>
                                                </div>
                                            </div>
                                        </a>
                                    </div>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="youxi-center-right-bottom" style="z-index: 0">

                            <div class="youxi-center-right-bottom-1">
                                <ul>
                                    <li>
                                        <div class="youxi-center-right-bottom-1-1">
                                            <a href="javascript:void(0)">
                                                <div class="youxi-center-right-bottom-1-1-1">
                                                    <div class="youxi-center-right-bottom-1-1-1-img">
                                                        <img src="img/img21.png"/>
                                                    </div>
                                                    <div class="youxi-center-right-bottom-1-1-1-p">
                                                        <p>时钟射手1</p>
                                                        <div class="b-d"><i class="i1"></i><span>19K</span><i class="i2"></i><span>19K</span></div>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="youxi-center-right-bottom-1-1">
                                            <a href="javascript:void(0)">
                                                <div class="youxi-center-right-bottom-1-1-1">
                                                    <div class="youxi-center-right-bottom-1-1-1-img">
                                                        <img src="img/img21.png"/>
                                                    </div>
                                                    <div class="youxi-center-right-bottom-1-1-1-p">
                                                        <p>时钟射手1</p>
                                                        <div class="b-d"><i class="i1"></i><span>19K</span><i class="i2"></i><span>19K</span></div>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="youxi-center-right-bottom-1-1">
                                            <a href="javascript:void(0)">
                                                <div class="youxi-center-right-bottom-1-1-1">
                                                    <div class="youxi-center-right-bottom-1-1-1-img">
                                                        <img src="img/img21.png"/>
                                                    </div>
                                                    <div class="youxi-center-right-bottom-1-1-1-p">
                                                        <p>时钟射手1</p>
                                                        <div class="b-d"><i class="i1"></i><span>19K</span><i class="i2"></i><span>19K</span></div>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="youxi-center-right-bottom-1-1">
                                            <a href="javascript:void(0)">
                                                <div class="youxi-center-right-bottom-1-1-1">
                                                    <div class="youxi-center-right-bottom-1-1-1-img">
                                                        <img src="img/img21.png"/>
                                                    </div>
                                                    <div class="youxi-center-right-bottom-1-1-1-p">
                                                        <p>时钟射手1</p>
                                                        <div class="b-d"><i class="i1"></i><span>19K</span><i class="i2"></i><span>19K</span></div>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="youxi-center-right-bottom-1-1">
                                            <a href="javascript:void(0)">
                                                <div class="youxi-center-right-bottom-1-1-1">
                                                    <div class="youxi-center-right-bottom-1-1-1-img">
                                                        <img src="img/img21.png"/>
                                                    </div>
                                                    <div class="youxi-center-right-bottom-1-1-1-p">
                                                        <p>时钟射手1</p>
                                                        <div class="b-d"><i class="i1"></i><span>19K</span><i class="i2"></i><span>19K</span></div>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="youxi-center-right-bottom-1-1">
                                            <a href="javascript:void(0)">
                                                <div class="youxi-center-right-bottom-1-1-1">
                                                    <div class="youxi-center-right-bottom-1-1-1-img">
                                                        <img src="img/img21.png"/>
                                                    </div>
                                                    <div class="youxi-center-right-bottom-1-1-1-p">
                                                        <p>时钟射手1</p>
                                                        <div class="b-d"><i class="i1"></i><span>19K</span><i class="i2"></i><span>19K</span></div>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="youxi-center-right-bottom-1-1">
                                            <a href="javascript:void(0)">
                                                <div class="youxi-center-right-bottom-1-1-1">
                                                    <div class="youxi-center-right-bottom-1-1-1-img">
                                                        <img src="img/img21.png"/>
                                                    </div>
                                                    <div class="youxi-center-right-bottom-1-1-1-p">
                                                        <p>时钟射手1</p>
                                                        <div class="b-d"><i class="i1"></i><span>19K</span><i class="i2"></i><span>19K</span></div>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    </li>
                                    <li>
                                        <div class="youxi-center-right-bottom-1-1">
                                            <a href="javascript:void(0)">
                                                <div class="youxi-center-right-bottom-1-1-1">
                                                    <div class="youxi-center-right-bottom-1-1-1-img">
                                                        <img src="img/img21.png"/>
                                                    </div>
                                                    <div class="youxi-center-right-bottom-1-1-1-p">
                                                        <p>时钟射手1</p>
                                                        <div class="b-d"><i class="i1"></i><span>19K</span><i class="i2"></i><span>19K</span></div>
                                                    </div>
                                                </div>
                                            </a>
                                        </div>
                                    </li>
                                </ul>
                            </div>

                    </div>
                </div>
            </div>
            <div class="gongkaik-center-wenzi">
                <div class="gongkaik-center-wenzi-1">
                    <p class="gongkaik-center-wenzi-p1">作品介绍&nbsp;:</p>
                    <p class="gongkaik-center-wenzi-p2">巴拉巴拉巴拉巴拉巴拉巴拉巴拉芭芭拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉芭芭拉 巴拉巴拉巴拉巴拉巴拉巴拉巴拉芭芭拉巴拉巴拉巴拉巴拉巴拉巴
                        巴拉巴拉巴拉巴拉巴拉巴拉巴拉芭芭拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉芭芭拉巴拉巴拉芭芭拉巴拉巴拉巴拉巴拉巴拉巴拉巴拉芭芭拉
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
    <div class="tootele">
        <div class="tootele1">
            <div class="tootele-left">
                <p>联系我们</p>
                <p>广州栩栩如生教育科技有限公司</p>
                <p>官方网址：http://www.codeorg.com.cn/</p>
                <p>服务电话：180－2805-1936</p>
            </div>
            <div class="tootele-center">
                <p>服务QQ：281753448</p>
                <p>邮件地址：service@codeorg.com.cn</p>
                <p>总部地址：广州·海珠区·M+创工场·腾讯</p>
            </div>
            <div class="tootele-right">
                <div class="tootele-right1">
                    <p>官方服务号</p>
                    <img src="img/img04.png"/>
                </div>
                <div class="tootele-right2">
                    <p>产品体验</p>
                    <img src="img/img05.png"/>
                </div>
            </div>
        </div>
    </div>
    <div class="fhdb" id="btn1"></div>
</div>
</body>
<script src="js/temp.js"></script>
<script type="text/javascript">
    $(".youxi-center-right-span").each(function(i,e){
        $(this).click(function(){
            $(".youxi-center-right-span>span").removeClass("youxi-center-right-s")
            $(".youxi-center-right-span>span").eq(i).addClass("youxi-center-right-s")
            for (var j = 0; j < 2; j++) {
                if (j === i) {
                    $('.youxi-center-right-bottom').eq(j).show()
                } else {
                    $('.youxi-center-right-bottom').eq(j).hide()
                }
            }
        })
    })

</script>

</html>